<template>
  <view>
    <!--<nui-step :step="1"></nui-step>-->
    <nui-step :step="stepType"></nui-step>
    <nui-guide :guideList="guideList" @curIndex="curIndex" v-if="isIOS"></nui-guide>
    <nui-guide :guideList="guideList1" @curIndex="curIndex" v-if="!isIOS"></nui-guide>
    <iframe :src="iframePath" class="iframe" frameborder="0" width="100%" height="100%" v-if="!isIOS"></iframe>
    <view class="box" v-else>
      <u-button type="primary" shape="square" :ripple="true" size="medium" class="custom-btn1" @click="toThrPath"
        >前往【预审登记】</u-button
      >
      <view class="tips">
        <text>说明：</text>
        <text>请点击下方“前往【预审登记】”按钮，进行预审登记信息填写；</text>
        <text>如果您已经在“预审登记”填写信息并提交，请直接点击“下一步”</text>
        <text>进入预审登记填写完信息提交成功后，返回此页面方式见下图示例：</text>
        <text class="pic"></text>
      </view>
    </view>
    <view class="faxin-guide" v-if="isShowGuide"></view>
    <view class="faxin-guide_1" v-if="isShowGuide1"></view>
    <u-button type="primary" shape="square" :ripple="true" size="medium" class="custom-btn" @click="toPath"
      >下一步</u-button
    >
    <u-modal
      v-model="showModel"
      content="请确认已经在【预审登记】中点击【提交】按钮，且页面显示为“提交成功”信息?"
      @confirm="submitData"
      @cancel="cancel"
      show-cancel-button
    ></u-modal>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import AuthInfo from "@/utils/authInfo.js";
import { isIOS } from "@/utils/index.js";

import store from "@/store";

export default {
  data() {
    return {
      showModel: false,
      iframePath: "",
      guideList: [
        {
          el: ".custom-btn1", // 需要高亮的元素，这里最好唯一
          tips: "① 点击这里，前往进入预审登记页面", // 提示文字
          next: "下一步", // 下一步按钮显示文字
          style: {
            // 高亮样式
            borderRadius: "5px",
            margin: "-5px 0 0 -5px",
            width: "210px",
            height: "50px",
          },
          tipStyle: {
            // tips样式
            top: "60px",
            atop: "57px",
            left: "0px",
          },
        },
        {
          el: ".faxin-guide", // 需要高亮的元素，这里最好唯一
          tips: "② 请确认站点信息准确", // 提示文字
          next: "下一步", // 下一步按钮显示文字
          style: {
            // 高亮样式
            borderRadius: "5px",
            margin: "-5px 0 0 -5px",
            left: "70px",
            top: "30px",
            width: "200px",
            height: "50px",
          },
          tipStyle: {
            // tips样式
            left: "10px",
            top: "60px",
            atop: "57px",
          },
        },
        {
          el: ".faxin-guide", // 需要高亮的元素，这里最好唯一
          tips: "③ 在这里输入准确的个人信息", // 提示文字
          next: "下一步", // 下一步按钮显示文字
          style: {
            // 高亮样式
            borderRadius: "12px",
            margin: "-5px 0 0 -5px",
            width: "175px",
            height: "200px",
            left: "34%",
            top: "120px",
          },
          tipStyle: {
            // tips样式
            left: "0px",
            top: "220px",
            atop: "217px",
          },
        },
        {
          el: ".faxin-guide", // 需要高亮的元素，这里最好唯一
          tips: "④ 输入完成后，请点击这里", // 提示文字
          next: "下一步", // 下一步按钮显示文字
          style: {
            // 高亮样式
            borderRadius: "12px",
            margin: "-5px 0 0 -5px",
            width: "80%",
            height: "60px",
            left: "10%",
            top: "350px",
          },
          tipStyle: {
            // tips样式
            left: "60px",
          },
        },
        {
          el: ".faxin-guide_1", // 需要高亮的元素，这里最好唯一
          tips: "⑤ 提交后，请点击这里返回", // 提示文字
          next: "下一步", // 下一步按钮显示文字
          style: {
            // 高亮样式
            borderRadius: "12px",
            margin: "-5px 0 0 -5px",
            width: "40px",
            height: "40px",
            left: "35%",
            top: "91.5vh",
          },
          tipStyle: {
            // tips样式
            left: "0px",
            top: "-80px",
            atop: "-25px",
          },
        },
        {
          el: ".custom-btn", // 需要高亮的元素，这里最好唯一
          tips: "⑥ 提交完成并返回后，请点击这里", // 提示文字
          next: "下一步", // 下一步按钮显示文字
          style: {
            // 高亮样式
            borderRadius: "12px",
            margin: "-5px 0 0 -5px",
            width: "220px",
            height: "50px",
            left: "25%",
            bottom: "90px",
          },
          tipStyle: {
            // tips样式
            left: "0px",
            top: "-80px",
            atop: "-25px",
          },
        },
      ],
      guideList1: [
        {
          el: ".faxin-guide", // 需要高亮的元素，这里最好唯一
          tips: "① 请确认站点信息准确", // 提示文字
          next: "下一步", // 下一步按钮显示文字
          style: {
            // 高亮样式
            borderRadius: "5px",
            margin: "-5px 0 0 -5px",
            left: "70px",
            top: "30px",
            width: "200px",
            height: "50px",
          },
          tipStyle: {
            // tips样式
            left: "10px",
            top: "60px",
            atop: "57px",
          },
        },
        {
          el: ".faxin-guide", // 需要高亮的元素，这里最好唯一
          tips: "② 在这里输入准确的个人信息", // 提示文字
          next: "下一步", // 下一步按钮显示文字
          style: {
            // 高亮样式
            borderRadius: "12px",
            margin: "-5px 0 0 -5px",
            width: "175px",
            height: "200px",
            left: "34%",
            top: "120px",
          },
          tipStyle: {
            // tips样式
            left: "0px",
            top: "220px",
            atop: "217px",
          },
        },
        {
          el: ".faxin-guide", // 需要高亮的元素，这里最好唯一
          tips: "③ 输入完成后，请点击这里", // 提示文字
          next: "下一步", // 下一步按钮显示文字
          style: {
            // 高亮样式
            borderRadius: "12px",
            margin: "-5px 0 0 -5px",
            width: "80%",
            height: "60px",
            left: "10%",
            top: "350px",
          },
          tipStyle: {
            // tips样式
            left: "60px",
          },
        },
        {
          el: ".custom-btn", // 需要高亮的元素，这里最好唯一
          tips: "④ 提交完成后，请点击这里", // 提示文字
          next: "下一步", // 下一步按钮显示文字
          style: {
            // 高亮样式
            borderRadius: "12px",
            margin: "-5px 0 0 -5px",
            width: "190px",
            height: "40px",
            left: "25%",
            bottom: "90px",
          },
          tipStyle: {
            // tips样式
            left: "0px",
            top: "-72px",
            atop: "-25px",
          },
        },
      ],
      isShowGuide: false,
      isShowGuide1: false,
    };
  },
  mounted() {
    this.getExminePath();
    !isIOS() && (this.isShowGuide = true);
  },
  computed: {
    ...mapGetters(["deptId","stepType"]),
    isIOS() {
      return isIOS();
    },
  },
  methods: {
    toThrPath() {
      window.location.href = this.iframePath;
    },
    toPath() {
      this.showModel = true;
    },
    async submitData() {
      await this.$api.riders.prepareExamineRecord();
      await AuthInfo.checkUserStatus();
    },
    cancel() {
      this.showModel = false;
    },
    async getExminePath() {
      let { data } = await this.$api.dept.queryExamineLink({ deptId: '376' });
      this.iframePath = data.examineRecordPath;
    },
    curIndex(num) {
      if (isIOS) {
        if (num === 4) {
          this.isShowGuide1 = true;
        } else {
          this.isShowGuide1 = false;
        }
        if (num === 1 || num === 2 || num === 3) {
          this.isShowGuide = true;
        } else {
          this.isShowGuide = false;
        }
      } else {
        if (num === 0 || num === 1 || num === 2) {
          this.isShowGuide = true;
        } else {
          this.isShowGuide = false;
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
uni-page-body {
  height: 100%;
}
.iframe {
  height: 75vh;
}
.custom-btn {
  margin: 15px auto;
  left: 50%;
  bottom: -10px;
  width: 48%;
  transform: translateX(-50%);
}
.box {
  height: 75vh;
  .custom-btn1 {
    position: absolute;
    margin: 15px auto;
    left: 50%;
    bottom: 12%;
    transform: translateX(-50%);
  }
  .tips {
    position: absolute;
    width: 100%;
    left: 5%;
    width: 90%;
    top: 80px;
    color: #999;
    line-height: 25px;
    uni-text {
      display: block;
    }
    .pic {
      display: block;
      background-image: url("../../common/imgs/yushen.jpg");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      width: 100px;
      height: 180px;
      margin: auto;
    }
  }
}
.faxin-guide {
  width: 100%;
  height: 400px;
  position: absolute;
  top: 10px;
  left: 0;
  background: url("../../common/imgs/yushen-1.jpg") no-repeat;
  background-size: 100% 100%;
  z-index: 100;
}
.faxin-guide_1 {
  width: 100%;
  height: 80px;
  position: absolute;
  bottom: 0px;
  left: 0;
  background: url("../../common/imgs/yushen-2.jpg") no-repeat;
  background-size: 100% 100%;
  z-index: 100;
}
</style>
